<template>
  <div>
    <!-- 顶部 -->
    <el-row :gutter="14">
      <el-col :span="4">
        <div class="label-wrap category">
          <label for="">类型:</label>
          <div class="label-content">
            <el-select
              v-model="category_value"
              placeholder="请选择"
              style="width: 100%"
            >
              <el-option
                v-for="item in options.category"
                :key="item.id"
                :label="item.category_name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </div>
        </div>
        <!-- <el-form-item label="类型:">
                </el-form-item> -->
      </el-col>
      <el-col :span="7">
        <div class="label-wrap date">
          <label for="">日期:</label>
          <div class="label-content">
            <el-date-picker
              v-model="date_value"
              type="datetimerange"
              align="right"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :default-time="['12:00:00', '08:00:00']"
              style="width: 100%"
            >
            </el-date-picker>
          </div>
        </div>
      </el-col>
      <el-col el-col :span="3">
        <div class="label-wrap key_work">
          <label for="">关键字:</label>
          <div class="label-content">
            <el-select v-model="search_key" style="width: 100%">
              <el-option
                v-for="item in search_option"
                :key="item.value"
                :value="item.value"
                :label="item.label"
              >
              </el-option>
            </el-select>
          </div>
        </div>
      </el-col>
      <el-col :span="3">
        <el-input
          v-model="search_keywork"
          placeholder="请输入内容"
          style="width: 100%"
        ></el-input>
      </el-col>
      <el-col :span="2">
        <el-button type="danger" style="width: 100%">搜索</el-button>
      </el-col>
      <el-col :span="2" :offset="3">
        <el-button
          type="danger"
          class="pull-right"
          style="width: 100%"
          @click="dialog_info = true"
          >新增</el-button
        >
      </el-col>
    </el-row>
    <div class="black-space-30"></div>

    <!-- 表单数据 -->
    <el-table
      :data="table_data.item"
      v-loading="loadingData"
      @selection-change="handleSelectionChange"
      border
      style="width: 100%"
    >
      <el-table-column type="selection" width="45"></el-table-column>
      <el-table-column prop="title" label="标题" width="730"></el-table-column>
      <el-table-column
        prop="categoryId"
        label="类型"
        width="130"
        :formatter="toCategory"
      ></el-table-column>
      <el-table-column
        prop="createDate"
        label="日期"
        width="237"
        :formatter="toData"
      ></el-table-column>
      <el-table-column prop="user" label="管理员" width="115"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <!-- slot-scope="scope" scope.row只会获取当前行的信息参数-->
          <el-button size="mini" type="danger" @click="deleteItem(scope.row.id)"
            >删除</el-button
          >
          <el-button size="mini" type="success" @click="dialog_info = true"
            >编辑</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="black-space-30"></div>
    <!-- 底部分页 -->
    <el-row>
      <el-col :span="12">
        <el-button size="medium" @click="deleteAll">批量删除</el-button>
      </el-col>
      <el-col :span="12">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[10, 20, 50, 100]"
          layout="total,sizes,prev,pager, next ,jumper"
          :total="total"
          class="pull-right"
        >
        </el-pagination>
      </el-col>
    </el-row>
    <!-- 新增弹窗 -->
    <DialogInfo
      :flag.sync="dialog_info"
      @close="closeDialog"
      :category="options.category"
      @getlist="getlist"
    />
  </div>
</template>
<script>
// import { commom } from "@/api/common.js";
import { GetCategory, GetList, DeleteInfo } from "@/api/news.js";
import { timestampToTime } from "@/utils/common.js";
import DialogInfo from "./dialog/info";
import { onMounted, reactive, ref, watchEffect } from "@vue/composition-api";
export default {
  name: "infoIndex",
  components: { DialogInfo },
  setup(props, { root }) {
    // const { getInfoCategory,categoryItem } = commom()
    //信息弹窗标记
    const dialog_info = ref(false);
    const category_value = ref("");
    const date_value = ref("");
    const search_key = ref("");
    const search_keywork = ref("");
    const loadingData = ref(false);
    //定义一个变量保存需要删除的id
    const deleteInfoId = ref();
    //总信息数
    const total = ref(0);
    //页码
    const page = reactive({
      pageNumber: 1,
      pageSize: 10,
    });
    const options = reactive({
      category: [],
    });

    const search_option = reactive([
      { value: "", label: "ID" },
      { value: "title", label: "标题" },
    ]);

    // 删除消息弹框
    const deleteItem = (id) => {
      //存储id,因为需要以数组的方式传进去所以要加[]
      deleteInfoId.value = [id];
      console.log(deleteInfoId.value);
      //消息响应封装在全局
      //标记
      root.confirm({
        content: "确认删除当前信息,确认之后无法恢复",
        tip: "警告",
        fn: comfirmDelete,
      });
    };

    // 批量删除消息弹框
    //标记
    const deleteAll = () => {
      if (!deleteInfoId.value) {
        root.$message({
          message: "请选择删除信息",
          type: 'error',
        });
        return false
      } else {
        root.confirm({
          content: "确认删除已选择信息,确认之后无法恢复",
          type: "warning",
          fn: comfirmDelete,
        });
      }
    };

    // 确认删除

    const comfirmDelete = (value) => {
      DeleteInfo({ id: deleteInfoId.value })
        .then((res) => {
          console.log(res);
          root.$message({
            message: res.data.message,
            type: "success",
          });
          //删除信息id清空
          deleteInfoId.value = "";
          getlist();
        })
        .catch((err) => {
          console.log(err);
        });
    };

    const table_data = reactive({
      item: [],
    });

    // 方法
    const handleCurrentChange = (val) => {
      page.pageNumber = val;
      getlist();
    };
    const handleSizeChange = (val) => {
      page.pageSize = val;
    };

    const closeDialog = () => {
      // console.log(123)
      dialog_info.value = false;
    };
    // watchEffect((value) =>{
    //   value = categoryItem.item
    //   options.category = value;
    // })
    const getlist = () => {
      let requestData = {
        categoryId: "",
        startTiem: "",
        endTime: "",
        title: "",
        id: "",
        pageNumber: page.pageNumber,
        pageSize: page.pageSize,
      };
      loadingData.value = true;
      GetList(requestData)
        .then((res) => {
          // console.log(res)
          table_data.item = res.data.data.data;
          total.value = res.data.data.total;
          loadingData.value = false;
        })
        .catch((error) => {
          loadingData.value = false;
        });
    };

    const toData = (row) => {
      return timestampToTime(row.createDate);
    };

    const toCategory = (row) => {
      //row是当前table中数据的每一条的所有信息
      // console.log(row)
      // 获取当前信息的类别的参数
      // 获取当前table中的每一信息的参数
      let id = row.categoryId;

      //去重
      let categoryData = options.category.filter((item) => {
        return item.id == id;
      })[0];

      // 返回所需要的值
      //当目前的分类被删除之后就要判断
      if (categoryData == undefined) {
        return null;
      } else {
        return categoryData.category_name;
      }
      // console.log(categoryData[0])
      // return categoryData.category_name
    };
    const handleSelectionChange = (val) => {
      // 获取id集
      let id = val.map((item) => {
        return item.id;
      });
      deleteInfoId.value = id;
      console.log(deleteInfoId.value);
    };

    onMounted(() => {
      //获取列表方法
      getlist();

      //获取分类方法
      //自定义全局方法
      // getInfoCategory();

      //vuex方法
      root.$store
        .dispatch("common/getCategoryInfo")
        .then((res) => {
          // console.log(res)
          let $data = res.data.data.data;
          options.category = $data;
          // console.log(options.category)
        })
        .catch((error) => {
          console.log(error);
        });
    });

    return {
      //ref
      dialog_info,
      category_value,
      date_value,
      search_keywork,
      search_key,
      total,
      page,
      loadingData,
      deleteInfoId,
      //reactive
      options,
      search_option,
      table_data,
      //methods
      getlist,
      handleCurrentChange,
      handleSizeChange,
      closeDialog,
      deleteItem,
      deleteAll,
      toData,
      toCategory,
      handleSelectionChange,
      // getCategory,
    };
  },
};
</script>

<style lang="scss" scope>
@import "../../styles/config.scss";
.label-wrap {
  &.category {
    @include labelDom(left, 60, 40);
  }
  &.date {
    @include labelDom(center, 93, 40);
  }
  &.key_work {
    @include labelDom(center, 99, 40);
  }
}
</style>